<template>
    <div class="mobile">
        <div class="topimg marginBt" ref="swiperContent">
            <div class="img-desc">
                <h2 class="title white">一站式婚礼直播服务</h2>
                <p class="text white">套餐价 1988元起</p>
                <button class="btn"><router-link :to="{ name: 'ourInfo'}">抽取免费试用机会</router-link></button>
            </div>
            <div class="shadow"></div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">身临其境 实时感受婚礼现场幸福气息</h2>
                <p class="text">主流媒体专用的TVU转播技术<br>超清画面即时传达</p>
                <p class="textEng savoye">TVU broadcast technology dedicated to mainstream media<br>Super clear screen instant messaging</p>
            </div>
            <div class="picbox">
                <div style="text-align:center;">
                    <img style="width:75%;" class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/e139895077c240d8b097ea12ba95dd6f.png" alt="">
                </div>
            </div>
        </div>
        <div class="interactive page-wapper marginBt">
            <div class="page-title"  v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">Interactive</h2>
                <p class="text">直啵互动版块</p>
            </div>
            <div class="interactive-box">
                <div class="lilist">
                    <li v-on:click.stop="change(0)">弹幕互动</li>
                    <li v-on:click.stop="change(1)">红包礼物</li>
                    <li v-on:click.stop="change(2)">在线回放</li>
                    <li v-on:click.stop="change(3)">直播间制定</li>
                </div>
                <div class="img">
                    <img  v-animate='"animated lightSpeedIn"' ref="changeImg" class="auto-img" src="http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181128/0ff523b6b0b84c1ba44657c1a8fd7df7.png" alt="">
                </div>
                <div class="lilist">
                    <li v-on:click.stop="change(4)">实时观看</li>
                    <li v-on:click.stop="change(5)">一键分享</li>
                    <li v-on:click.stop="change(6)">喜帖制作</li>
                    <li v-on:click.stop="change(7)">游戏功能</li>
                </div>
            </div>
        </div>
        <div class="wedding-experience page-wapper marginBt" ref="weddingExperience">
            <div class="page-title" v-animate='"animated bounceIn"' data-wow-duration="1s">
                <h2 class="title">直播套餐服务</h2>
                <p class="text">专人跟拍+专业设备</p>
                <p class="textEng savoye">Special person with the shoot + professional equipment</p>
            </div>
        </div>
        <div class="chooseall page-wapper" style="margin-bottom:20px;">
            <li class="choose" :class="item.colorClass" v-for="(item, index) in chooseArr" :key="index">
                <h2 class="choose-title">{{item.title}}</h2>
                <p class="choose-text">{{item.titleEn}}</p>
                <p class="choose-desc">{{item.btnText}}</p>
                <button>{{item.price}}</button>
            </li>
        </div>
        <div class="config page-wapper paddingBt">
            <div v-for="(item, index) in productArr" :key="index">
                <div class="list-content">
                    <ul :class="'config' + (index1 + 1)" v-for="(item1, index1) in item.list" :key="index1">
                        <li v-for="(item2, index2) in item1.listname" :key="index2">
                            <input v-if="item2.flag" class="chk yesColor" type="checkbox" checked>
                            <input v-else class="chk noColor" type="checkbox">
                            <label v-if="item2.flag" class="yesbColor" for=""></label>
                            <label v-else for="" class="nobColor"></label>
                            <span v-if="item2.flag" class="yesColor">{{item2.name}}</span>
                            <span v-else class="noColor">{{item2.name}}</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <button class="freeuse marginBt"><router-link :to="{ name: 'ourInfo'}">立即订阅</router-link></button>
    </div>
</template>

<script type="text/ecmascript-6">
import { config } from 'common/js/config';
export default {
    metaInfo: {
        title: '直啵官网',
        meta: [
            {
                name: '婚礼直啵',
                content: '亲友无法到场,婚礼全程记录,海外婚礼,更多互动，更多分享'
            },
            {
                name: '婚礼直播',
                content: '一款专为婚礼直播设计的在线应用小程序'
            },
            {
                name: '婚礼直啵设备',
                content: '通过TVU专属Anywhere手机app，聚合2路网络，确保传输稳定。'
            }
        ]
    },
    data() {
        return {
            changeArr: config.changeArr,
            chooseArr: config.chooseArr,
            productArr: config.listArr
        };
    },
    methods: {
        change: function (num) {
            this.$refs.changeImg.src = this.changeArr[num].imgSrc;
        },
        initial() {
            let wh = window.innerWidth;
            if (wh >= 768 && wh < 1400 && wh !== 828) {
            // PC端 宽度比例90%
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else if (wh < 768 || wh === 828) {
            // 移动设备 828单独适配plus
                this.$refs.swiperContent.style.height = 1.7786 * wh + 'px';
            } else if (wh >= 1400 && wh < 1920) {
                // PC大屏 固定宽度
                this.$refs.swiperContent.style.height = 0.448 * wh + 'px';
            } else {
                this.$refs.swiperContent.style.height = '860px';
            }
        }
    },
    mounted() {
        this.initial();
        window.addEventListener('resize', this.initial);
    }
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable"
@import "~common/stylus/mixin"
.mobile
    width 100%
    .topimg
        background url("http://weddingimg-oss.tvunetworks.cn/weddinglive-image/20181210/981ef94a621a4fa79fe64a6825852a25.png") no-repeat left top
    .interactive
        .interactive-box
            padding 0 50px
            display flex
            justify-content center
            align-items center
            .img
                width 33%
            .lilist
                width 33%
                li
                    font-size 24px
                    font-family PingFangSC-Medium
                    font-weight 500
                    color rgba(255,149,139,1)
                    background #fff
                    width 90%
                    height 60px
                    line-height 60px
                    box-shadow 0px 0px 15px 0px rgba(255,149,139,0.3)
                    border-radius 30px
                    margin 100px auto
                    text-align center
                li:hover
                    background rgba(255,149,139,1)
                    box-shadow 0px 0px 15px 0px rgba(255,149,139,0.3)
                    color #fff
                    cursor pointer
    button.freeuse
        display block
        margin -30px auto 0 auto
        width 300px
        height 70px
        background $color-background-d
        border-radius 35px
        font-size 30px
        font-family PingFangSC-Medium
        font-weight 500
        color rgba(255,255,255,1)
        line-height 42px
        letter-spacing 1px
        cursor pointer
        a
            color #fff
    .chooseall
        display flex
        justify-content center
        align-items center
        .choose
            height 200px
            width 180px
            border-radius 5px
            margin 0 20px
            padding 34px 40px
            color $color-background-f
            text-align center
            cursor pointer
            &:hover
                box-shadow 0 2px 4px 3px rgba(0, 0, 0, 0.12)
                -ms-transform translate3d(0, -4px, 0)
                -webkit-transform translate3d(0, -4px, 0)
                transform translate3d(0, -4px, 0)
            .choose-title
                font-size 25px
                line-height 35px
            .choose-desc
                margin-top 25px
            button
                width 100px
                height 30px
                margin-top 15px
                border 1px solid $color-background-f
                color $color-background-f
                border-radius 15px
                background none
                cursor pointer
                font-size 18px
            &.purple
                background #9690ff
            &.red
                background $color-background-d
            &.yellow
                background #ffce69
            &.blue
                background #6aafff
    .config
        .list-content
            display flex
            justify-content center
            align-items center
            ul
                width 180px
                margin 0 20px
                padding-left 20px
                li
                    line-height 30px
                    .chk
                        display none
                        &:checked + label:after
                            content: '\2714'
                            position: absolute
                            top: -7px
                            left: 0px
                            color: #fff
                            width: 100%
                            text-align: center
                            font-size: 12px;
                            transform: scale(0.8)
                            -webkit-transform: scale(0.8)
                            -ms-transform: scale(0.8)
                            vertical-align: text-top
                    label
                        background-color: #FFF
                        // border: 1px solid #DCDCDC
                        padding: 7px
                        border-radius: 50%
                        display: inline-block
                        position: relative
                        margin-right: 8px
                    span
                        font-size 14px
            .config1
                .yesColor
                    color rgba(185,157,251,1)
                .noColor
                    color rgba(194,194,194,1)
                .yesbColor
                    background-color rgba(185,157,251,1)
                .nobColor
                    border 1px solid rgba(194,194,194,1)
            .config2
                .yesColor
                    color rgba(244,140,148,1)
                .noColor
                    color rgba(194,194,194,1)
                .yesbColor
                    background-color rgba(244,140,148,1)
                .nobColor
                    border 1px solid rgba(194,194,194,1)
            .config3
                .yesColor
                    color rgba(255,204,135,1)
                .noColor
                    color rgba(194,194,194,1)
                .yesbColor
                    background-color rgba(255,204,135,1)
                .nobColor
                    border 1px solid rgba(194,194,194,1)
            .config4
                .yesColor
                    color rgba(154,195,244,1)
                .noColor
                    color rgba(194,194,194,1)
                .yesbColor
                    background-color rgba(154,195,244,1)
                .nobColor
                    border 1px solid rgba(194,194,194,1)
@media screen and (max-width 1400px)
    .moblie
        .config
            .list-content
                ul
                    width 220px
                    padding-left 20px
                    li
                        line-height 25px
                        .chk
                            &:checked + label:after
                                top: -4px
        .chooseall
            li
                height 160px
                width 150px
                margin 0 20px
                padding 20px 25px
                h2
                    font-size 20px
                    line-height 25px
                button
                    width 80px
                    height 26px
                    margin-top 28px
                    border-radius 10px
        .interactive
            .interactive-box
                padding 0 50px
                .lilist
                    li
                        font-size 20px
                        width 90%
                        height 45px
                        line-height 45px
                        border-radius 24px
                        margin 60px auto
        button.freeuse
            margin -60px auto 0 auto
            width 300px
            height 50px
@media screen and (max-width 900px)
    .mobile
        .interactive
            .interactive-box
                padding 0 50px
                .lilist
                    li
                        font-size 16px
                        width 80%
                        height 35px
                        line-height 35px
                        border-radius 24px
                        margin 50px auto
        button.freeuse
            margin -40px auto 0 auto
@media screen and (max-width 767px)
    .mobile
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
@media (min-device-width : 414px) and (max-device-width : 736px) and (-webkit-min-device-pixel-ratio : 3)
    .mobile
        .topimg
            background url("~common/image/img1.png") no-repeat left top
            .text
                display none
</style>

